<template>
  <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统日志</el-breadcrumb-item>
        <el-breadcrumb-item>前台用户登录日志</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-form :inline="true">
          <el-form-item label="账号">
            <el-input placeholder="请输入账号" clearable v-model="username" @clear="search">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="exportExcel">导出日志</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="loginList" border stripe>
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="账号" prop="user.username"></el-table-column>
          <el-table-column label="昵称" prop="user.name"></el-table-column>
          <el-table-column label="登录时间" prop="logintime"></el-table-column>
          <el-table-column label="登录ip" prop="ipaddress"></el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[9, 18, 27]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
  name: "UserLogLogin",
  data() {
    return {
      //分页
      pageNum: 1,
      pageSize: 9,
      total: 0,
      //搜索条件表单
      username: '',
      //
      loginList: [],
    }
  },
  methods:{
    //导出日志
    exportExcel(){
      this.$axios.get("/log/exportExcel");
    },
    //============搜索分页=============
    //每页显示数量变化时
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initLoginList() ;
    },
    //点击跳转页面
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initLoginList() ;
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.initLoginList() ;
    },
    //============加载数据=============
    //加载申请列表
    initLoginList() {
      let url = "/log/userLoginList";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          name: this.username
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.loginList = res.data.data.list;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },
  created() {
    this.initLoginList() ;
  }
}
</script>

<style scoped>

</style>